]<template>
  <div class="layout">
	  <div class="box" :style="[boxStyle]">
		  <view class="service-grid">
		    <view v-for="(item, index) in services" :key="index" class="service-item" @click="serviceItem(item)">
		      <view class="icon-wrapper">
		        <uni-icons :type="item.icon" size="30" color="#2a8bf2"></uni-icons>
		      </view>
		      <text class="service-title">{{ item.title }}</text>
		      <text class="service-desc">{{ item.desc }}</text>
		    </view>
		  </view>
	  </div>
  </div>
</template>
<script>
import { modelNavigateTo } from "./tpl";
export default {
  title: "菜单模块",
  props: {
	  res: {
		  type:Array,
		  default:()=>[]
	  },
	  listStyle: {
	  	type: Object,
	  	default: () => {}
	  },
  },
  computed: {
  	boxStyle() {
  		let style={};
  		for(var key in this.listStyle){
  			style[key] = this.listStyle[key];
  		}
		
  		return style;
  	},
  },
  data() {
    return {
      modelNavigateTo,
    };
  },
};
</script>
<style lang="scss" scoped>

.layout{
	width:750rpx;
	margin:0; 
	
}
.box{
	width:750rpx;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .service-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .icon-wrapper {
      margin-bottom: 20rpx;
    }

    .service-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .service-desc {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.icon {
  width: 80rpx;
  height: 80rpx;
  display: block;
  margin: 0 auto 20rpx;
}

.sub {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.list-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.list-item:last-child {
  border-bottom: none;
}
</style>